
<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-white text-gray-800 p-8">
    <!-- 顶部信息栏 -->
    <header class="mb-8">
      <div class="flex justify-between items-center">
        <h1 class="text-2xl font-bold">数据监控中心</h1>
        <div class="flex items-center gap-4">
          <div class="text-gray-600">{{ currentTime }}</div>
        </div>
      </div>
    </header>

    <!-- 图表网格布局 -->
    <div class="grid grid-cols-2 gap-6">

      <!-- 折线图 -->
      <div class="bg-white p-6 rounded-lg shadow-lg border border-gray-200">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl">合同管理</h2>
        </div>
        <!-- <div ref="cpuChart" class="w-full h-[400px]"></div> -->
                                                    <BarChart

                subtitle=""
                :data="state.category.hetongguanlizhuzhuangList"
                :theme="theme"
                height="300px"
            />
                              

                          </div>

      <!-- 柱状图 -->
      <div class="bg-white p-6 rounded-lg shadow-lg border border-gray-200">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl">维保计划</h2>
          <!-- <div class="flex gap-2">
            <button class="!rounded-button bg-gray-700 p-2 hover:bg-gray-600 whitespace-nowrap">
              <i class="fas fa-expand"></i>
            </button>
          </div> -->
        </div>
        <!-- <div ref="memoryChart" class="w-full h-[400px]"></div> -->
                                                            

                      <Legend

                subtitle=""
                :data="state.category.weibaojihuabanyuanList"
                :theme="theme"
                height="300px"
            />

                          </div>

      <!-- 折线图 -->
      <div class="bg-white p-6 rounded-lg shadow-lg border border-gray-200">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl">合同管理)</h2>
          <div class="flex gap-2">
            <button class="!rounded-button bg-gray-700 p-2 hover:bg-gray-600 whitespace-nowrap">
              <i class="fas fa-expand"></i>
            </button>
          </div>
        </div>
        <!-- <div ref="networkChart" class="w-full h-[400px]"></div> -->
                      <PieChart

                subtitle=""
                :data="state.category.hetongguanlibingtuList"
                :theme="theme"
                height="300px"
            />
                                                            

                          </div>

      <!-- 面积图 -->
      <div class="bg-white p-6 rounded-lg shadow-lg border border-gray-200">
        <div class="flex justify-between items-center mb-4">
          <h2 class="text-xl">维保计划</h2>
        </div>
                    
            <LineChart

                subtitle=""
                :data="state.category.weibaojihuazhexianList"
                :theme="theme"
                height="300px"
            />
                                                  

                          </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import * as echarts from 'echarts';
  import {defineAsyncComponent,onMounted,onUnmounted,reactive,computed,ref} from 'vue'
  import { useLayoutConfigStore } from '@/stores/layoutConfig'
  import request from "@/utils/request";
  //饼图
  const PieChart=defineAsyncComponent(()=>import('@/components/echarts/pieChart.vue'));
  //折线图
  const LineChart=defineAsyncComponent(()=>import('@/components/echarts/lineChart.vue'));
  //柱状图
  const BarChart=defineAsyncComponent(()=>import('@/components/echarts/barChart.vue'));
  //仪表盘
  const Map=defineAsyncComponent(()=>import('@/components/echarts/map.vue'));
  const Wordcloud=defineAsyncComponent(()=>import('@/components/echarts/wordcloud.vue'));
  const boundaryGap=defineAsyncComponent(()=>import('@/components/echarts/boundaryGap.vue'));
  const Funnel=defineAsyncComponent(()=>import('@/components/echarts/Funnel.vue'));
  const Legend=defineAsyncComponent(()=>import('@/components/echarts/legend.vue'));
  const Radius=defineAsyncComponent(()=>import('@/components/echarts/radius.vue'));
  const China=defineAsyncComponent(()=>import('@/components/echarts/china.vue'));
  const layoutConfig=useLayoutConfigStore();

  const currentTime = ref(new Date().toLocaleString('zh-CN'));
  const timer = setInterval(() => {
    currentTime.value = new Date().toLocaleString('zh-CN');
  }, 1000);

  const state=reactive({
    loading:false,
    category:{
                        hetongguanlizhuzhuangList:[],
                        weibaojihuabanyuanList:[],
                        hetongguanlibingtuList:[],
                        weibaojihuazhexianList:[],
        
    }

  })
            gethetongguanlizhuzhuangList();
            getweibaojihuabanyuanList();
            gethetongguanlibingtuList();
            getweibaojihuazhexianList();
      
      
      function gethetongguanlizhuzhuangList(){
        request({
                      url:'value/hetongguanli/hetongmingcheng/hetongjine',
                    method:'get'
        }).then((data)=>{
          // console.log(data.data);
          const newsarr= objArrtransArr(data.data,'hetongmingcheng','total');

          state.category.hetongguanlizhuzhuangList=newsarr;
          state.loading=false;
        })
      }


      
      function getweibaojihuabanyuanList(){
        request({
                      url:'value/weibaojihua/weibaokaishishijian/weibaojieshushijian',
                    method:'get'
        }).then((data)=>{
          // console.log(data.data);
          const newsarr= objArrtransArr(data.data,'weibaokaishishijian','total');

          state.category.weibaojihuabanyuanList=newsarr;
          state.loading=false;
        })
      }


      
      function gethetongguanlibingtuList(){
        request({
                      url:'value/hetongguanli/shengxiaoriqi/zhongzhiriqi',
                    method:'get'
        }).then((data)=>{
          // console.log(data.data);
          const newsarr= objArrtransArr(data.data,'shengxiaoriqi','total');

          state.category.hetongguanlibingtuList=newsarr;
          state.loading=false;
        })
      }


      
      function getweibaojihuazhexianList(){
        request({
                      url:'value/weibaojihua/weibaoxiangmu/fuzeren',
                    method:'get'
        }).then((data)=>{
          // console.log(data.data);
          const newsarr= objArrtransArr(data.data,'weibaoxiangmu','total');

          state.category.weibaojihuazhexianList=newsarr;
          state.loading=false;
        })
      }


      






  function  objArrtransArr(olddata:any, oldval:any, oldname:any) {
    const newArr:any = [];
    olddata.forEach(item => {
      // 定义数组内部对象形式
      let obj = {};
      obj.name = item[oldval];
      obj.value = item[oldname];
      // 将对象数据推到数组中
      newArr.push(obj);
    });
    return newArr;
  }




</script>

<style scoped>

</style>



